<!-- -->
<template>
  <div class="public">
    <Header>
      <input
        type="text"
        placeholder="请输入楼盘名称"
        v-model="values"
        @input="search"
      />
      <span slot="map">地图找房</span></Header
    >

    <div class="con">
      <div class="screen">
        <SelectMeau
          @price="searchPrice"
          @city="searchCity"
          @type="searchType"
          :classify="classType"
        ></SelectMeau>
      </div>
      <div v-for="(val, i) in list" :key="i" class="classify-item">
        <img :src="val.img" alt="" />
        <div class="classify-info">
          <p>
            <span>在售</span><span>{{ val.listingTitle }}</span>
          </p>
          <div>{{ val.area }}|建面{{ val.houseArea }}</div>
          <p>{{ val.sellingprice }}/套</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRentHouseList,
  getHouseList,
  getHouseData,
  searchPrice,
} from "@/api";
import Header from "@/components/Header.vue";
import SelectMeau from "@/components/SelectMeau.vue";

export default {
  // import引入到组件需要注入到对象中才能使用
  components: { Header, SelectMeau },
  data() {
    // 这里存放数据
    return {
      classType: null,
      list: [],
      value1: 0,
      value2: "a",
      one: [
        { name: "默认" },
        { name: "价格低到高" },
        { name: "价格高到低" },
        { name: "开盘时间较早" },
        { name: "开盘时间较晚" },
      ],
      two: [
        { name: "全部" },
        { name: "小户型" },
        { name: "低密居所" },
        { name: "旅游地产" },
        { name: "教育资源" },
        { name: "公园附近" },
        { name: "精装楼盘" },
        { name: "品牌楼盘" },
      ],
      three: [
        { name: "全部" },
        { name: "在售" },
        { name: "新盘" },
        { name: "尾盘" },
        { name: "售罄" },
        { name: "未开盘" },
      ],
      four: [
        { name: "全部" },
        { name: "毛胚" },
        { name: "简装" },
        { name: "精装" },
        { name: "豪装" },
      ],
      value: "",
      value1: 0,
      value2: "a",
      value3: "a",
      value4: "a",
      option1: [{ text: "区域", value: 0 }],
      option2: [
        { text: "价格", value: "a" },
        { text: "不限", value: "b" },
        { text: "300万以下", value: "c" },
        { text: "300万~500万", value: "e" },
        { text: "500万~1000万", value: "f" },
        { text: "1000万以上", value: "g" },
      ],
      option3: [{ text: "类型", value: "a" }],
      option4: [{ text: "更多", value: "a" }],
      areaList: [],
      values: "",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 通过params传的id值来判断获取的数据 3 4 6
    getList() {
      getRentHouseList({
        classify: this.classType * 1,
        values: this.values,
      }).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    // 获取筛选地区
    getArea() {
      getHouseList().then((res) => {
        this.areaList = res.data;
      });
    },
    // 筛选不同地区的数据
    searchCity(item) {
      this.$refs.item.toggle();
      getHouseData({ area: item }).then((res) => {
        this.list = res.data;
      });
    },
    // 模糊搜索
    search() {
      this.getList();
    },
    // 确认按钮
    onConfirm() {
      this.$refs.Item.toggle();
    },
    // 搜索价格
    searchPrice(data) {
      this.list = data;
    },
    // 搜索区域
    searchCity(data) {
      this.list = data;
    },
    // 搜索类型
    searchType(data) {
      this.list = data;
    },
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    this.classType = this.$route.params.id;
    this.getList();
    this.getArea();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.con {
  flex: 1;
  overflow-y: auto;
}
.classify-item {
  display: flex;
  padding: 10px;
  img {
    width: 100px;
    height: 100px;
  }
  .classify-info {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    justify-content: space-between;
    p {
      display: flex;
      span:nth-of-type(1) {
        display: flex;
        justify-content: center;
        padding: 4px 7px;
        background: #ccc;
        font-size: 14px;
      }
      span:nth-of-type(2) {
        font-size: 18px;
        padding-left: 15px;
      }
    }
  }
}

.li-one {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  .tag-border {
    padding: 5px 10px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 0;
  }
  .van-tag--large {
    font-size: 14px;
  }
}
.van-popup {
  > h3 {
    padding-left: 10px;
  }
}
.city {
  width: 100%;
  height: auto;
  padding: 0 10px;
  p {
    width: 100%;
    height: 35px;
  }
}
</style>
